<template>
  <!-- 
    https://tailwindcss.com/docs/customizing-colors
   -->
  <div class="text-13">
    <div class="py-2 bg-gray">
      <div class="max-w-screen-xl mx-auto flex justify-between">
        <div>
          尚品汇欢迎您！ 请 <nuxt-link to="/login">登录</nuxt-link> |
          <nuxt-link to="/register">免费注册</nuxt-link>
        </div>
        <ul class="flex">
          <li class="border-r border-black border-solid pr-2 mr-2">我的订单</li>
          <li class="border-r border-black border-solid pr-2 mr-2">
            我的购物车
          </li>
          <li class="border-r border-black border-solid pr-2 mr-2">
            我的尚品汇
          </li>
          <li class="border-r border-black border-solid pr-2 mr-2">
            尚品汇会员
          </li>
          <li class="border-r border-black border-solid pr-2 mr-2">企业采购</li>
          <li class="border-r border-black border-solid pr-2 mr-2">
            关注尚品汇
          </li>
          <li class="border-r border-black border-solid pr-2 mr-2">合作招商</li>
          <li>商家后台</li>
        </ul>
      </div>
    </div>
    <div class="max-w-screen-xl mx-auto flex justify-between items-center mt-2">
      <img src="~/assets/imgs/logo.png" alt="logo" />
      <form class="flex">
        <input
          type="text"
          class="w-96 h-7 border-2 border-red border-solid outline-none text-xs pl-2"
        />
        <button class="w-20 bg-red h-7 text-white text-xs">搜索</button>
      </form>
    </div>
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: "Header",
});
</script>

<style scoped lang="scss"></style>
